<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>FB</title>
<script type="text/javascript"	src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="js/sjcl.js"></script>
<script type="text/javascript" src="js/server.js"></script>
<script type="text/javascript" src="js/client.js"></script>
<link rel="Stylesheet" type="text/css" href="base.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>

<!-- http://tympanus.net/codrops/2009/12/03/css-and-jquery-tutorial-overlay-with-slide-out-box/ -->
<body>
	<form id="base">
		<!--INPUT TEXT FOR GLOBAL VARIABLES-->
		<div>appId<input type="text" id="appId" value="214981728649024"	style="width: 300px" /><!-- 370960029693800   --></div>
		<div>app secret<input type="text" id="app_secret"value="214981728649024|PXeS_a8QziLYQurlOJusMloHvcY" style="width: 300px" /></div>
		<div>channelUrl<input type="text" id="channelUrl" value="localhost"	style="width: 300px" />	</div>
		<div>stepvalue<input type="text" value="0" id="stepvalue"style="width: 300px" /></div>
		<div>FBid<input type="text" value="0" id="fbid" style="width: 300px" />	</div>
		<div>firstName<input type="text" value="0" id="firstName" style="width: 300px" /></div>
		<div>lastName<input type="text" value="0" id="lastName"	style="width: 300px" /></div>
		<div>emailAddress<input type="text" value="0" id="emailAddress" style="width: 300px" /></div>
		<div>userName<input type="text" value="0" id="userName"	style="width: 300px" /></div>	
		<div>imageUrl<input type="text"	value="http://media.cymaxstores.com/Images/47/8031-M.jpg" id="imageUrl" style="width: 300px" /></div>
		<div>messageLink<input type="text"	value="http://www.cymax.com/South-Shore-3070-23X-Lexington-Platform-Bed.htm" id="messageLink" style="width: 300px" /></div>
		
		<!--/-->
		<div id="activator" class="uiButtonConfirm">click Me</div>


		<div class="overlay" id="overlay" style="display: none;"></div>
		<div class="fancybox" id="box0">
			<a class="fancyboxclose" id="boxclose0"></a>
			<h1>Poll your friends</h1>
			<div id="mainBody0" class="pageContentItem">
				<table>
					<tr>
						<td>
							<div>
								<div id="imageHolder0" class="imageHolder sidebyside margined">
									<img src="" height="220px" alt="" class="imageRef" width="180px" />
								</div>
								<div id="contentHolder2" class=" sidebyside"
									style="height: 100px; width: 300px;">
									<div class="margined">Include a Message:</div>
									<div>
										<div class="margined">
											<textarea id="conversationText" rows="10" cols="55"></textarea>
										</div>
										<div class="margined">
											<div class="fb-login-button" scope="email,user_checkins" onlogin="loggedin();goNext();" style="height: 15px">
												Login with Facebook</div>
										</div>
									</div>
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div></div>
						</td>
					</tr>
				</table>
			</div>
			<div id="footer0" class="footerdialog">
				<ul>
					<li id="pre0" class="inRow">Pre</li>
					<li id="next0" class="inRow">Next</li>
				</ul>
			</div>
		</div>

		<div class="fancybox" id="box1">
			<a class="fancyboxclose" id="boxclose1"></a>
			<h1>Who do you want to poll?</h1>
			<div id="mainbody1" class="pageContentItem">
				<div >
					<span style="padding-right:10px;">Search:</span><input type="text" id="txtSearchFriends" class="sfield"/>
				</div>
				<div id="contentHolder1">
					<div id="facebookFriendList" class="oveflowdiv box" style="height: 150px"></div>
				</div>
				<div id="selectedFriends" class="oveflowdiv box" style="height: 50px"></div>
			</div>
			<div id="footer1" class="footerdialog">
				<ul>
					<li id="pre1" class="inRow">Pre</li>
					<li id="next1" class="inRow">Next</li>
					<li id="send" class="inRow" onclick="getContent();">GetURL</li>
				</ul>
			</div>
		</div>

		<div class="fancybox" id="box2">
			<a class="fancyboxclose" id="boxclose2"></a>
			<h1>Not sure about it? Ask your friends.</h1>
			<div id="mainbody2" class="pageContentItem">
				<table>
					<tr>
						<td>
							<div id="imageHolder2" class="imageHolder  sidebyside">
								<img src="" width="180px" height="220px" alt="" class="imageRef" />
							</div>
							<div id="contentHolder2" class="sidebyside"
								style="height: 220px; width: 350px;">
								<div class="margined">Friends which you selected:</div>
								<div>
									<div class="margined box" style="height: 190px; width: 340px;">
										<div id="finalSelectedFriends" class="margined"></div>
									</div>
								</div>
							</div>
						</td>
					</tr>
				</table>
			</div>
			<div id="footer2" class="footerdialog">
				<ul>
					<li id="pre2" class="inRow">Pre</li>
					<li id="next2" class="inRow">Next</li>
					<li id="sendConversion" class="inRow" onclick="sendApprequests('');">Send Request</li>
					<li id="selectFriends" class="inRow" onclick="sendSelectedFreind();">Copy</li>
				</ul>
			</div>
		</div>

		<div class="fancybox" id="box3">
			<a class="fancyboxclose" id="boxclose3"></a>
			<h1>Great! Your Question Has Been Sent</h1>
			<div id="mainbody3" class="pageContentItem">
				<table>
					<tr>
						<td>
							<div id="imageHolder3" class="imageHolder  sidebyside margined">
								<img src="" width="180px" height="220px" alt="" class="imageRef" />
							</div>
							<div>
								<div class="margined">
									<div id="finalSelectedFriends" class="margined"
										style="height: 200px; width: 255px;"></div>
								</div>
							</div>
						</td>
					</tr>
				</table>
			</div>
			<div id="footer3" class="footerdialog">
				<ul>
					<li id="pre3" class="inRow">Pre</li>
					<li id="next3" class="inRow">Next</li>
				</ul>
			</div>
		</div>

	</form>
</body>
</html>
